<template>
  <div class="app-container">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="100px" style="width: 400px; margin-left:50px;">
      <el-form-item label="项目名称" prop="projectName">
        <el-input v-model="temp.projectName" />
      </el-form-item>
      <el-form-item label="佣金返点" prop="rebateRate">
        <el-input-number v-model="temp.rebateRate" controls-position="right" />
      </el-form-item>
      <el-form-item label="预算金额" prop="currentAmount">
        <el-input-number v-model="temp.currentAmount" controls-position="right" :min="0" />
      </el-form-item>
      <el-form-item label="客单金额" prop="singleMaxAmount">
        <el-input-number v-model="temp.singleMaxAmount" controls-position="right" :min="0" />
      </el-form-item>
      <!--计划说明-->
      <el-form-item label="效果认定期" prop="confirmCycle">
        <el-input-number v-model="temp.confirmCycle" controls-position="right" :min="0" :max="50" />
      </el-form-item>
      <el-form-item label="推广时间" prop="promotionDate">
        <el-date-picker
          v-model="temp.promotionDate"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
        >>
        </el-date-picker>
      </el-form-item>
      <el-form-item label="跳转链接" prop="rebateUrl">
        <el-input v-model="temp.rebateUrl" clearable>
          <template slot="prepend">https://</template>
        </el-input>
      </el-form-item>
      <el-form-item label="结算周期" prop="settlementCycle">
        <el-input v-model="temp.settlementCycle" />
      </el-form-item>

      <el-form-item>
        <el-button v-if="isCreate" type="primary" @click="submitForm()">立即创建</el-button>
        <el-button v-else type="primary" @click="updateForm()">立即更新</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>
import { Notification, MessageBox, Message } from 'element-ui'
import { tableInfo, crudUtil } from '@/utils/future/toolkit'
import { createActivity, fetchActivity, updateActivity } from '@/api/purch/purchActivity'
import { uploaderSingle } from '@/utils/future/ossUtil'

const templateTypeOptions = [{ key: 1, value: '模板一' }, { key: 2, value: '模板二' }]
export default {
  name: 'ScheduleForm',
  data() {
    tableInfo.fileList = []
    tableInfo.dialogImageUrl = ''
    tableInfo.dialogVisible = false
    tableInfo.disabled = false
    tableInfo.isCreate = true
    tableInfo.uploadLimit = 1
    tableInfo.templateTypeOptions = templateTypeOptions
    tableInfo.idKey = 'id'
    tableInfo.temp = { id: '', projectName: '', rebateRate: '', currentAmount: '', singleMaxAmount: '',
      promotionDate: [], rebateUrl: '', confirmCycle: '',
      settlementCycle: '', coupon: '', activityStatus: false, promotionExplain: '', remark: '', activityImgUrl: '' }
    tableInfo.rules = {
      projectName: [
        { required: true, message: '请输入活动名', trigger: 'blur' }
      ],
      rebateRate: [
        { required: true, message: '请输入返佣比例', trigger: 'blur' }
      ],
      currentAmount: [
        { required: true, message: '请输入预算金额', trigger: 'blur' }
      ],
      singleMaxAmount: [
        { required: true, message: '请输入客单金额', trigger: 'blur' }
      ],
      confirmCycle: [
        { required: true, message: '请输入效果认定期', trigger: 'blur' }
      ],
      promotionDate: [
        { required: true, message: '请选择活动时间', trigger: 'blur' }
      ],
      rebateUrl: [
        { required: true, message: '请输入返利链接', trigger: 'blur' }
      ],
      settlementCycle: [
        { required: true, message: '请输入结算周期', trigger: 'blur' }
      ]
    }
    return tableInfo
  },
  created() {
    this.temp.id = this.$route.query.activityId
    if (this.temp.id != '' && this.temp.id != undefined) {
      this.updateActivity(this.temp.id)
    } else {
      this.createActivity()
    }
  },
  methods: {
    createActivity() {
      this.isCreate = true
    },
    updateActivity(id) {
      const that = this
      that.isCreate = false
      fetchActivity(id).then(res => {
        that.temp = res
        that.temp.promotionDate = [that.temp.startDate, that.temp.endDate]
        that.fileList = [{ url: that.temp.activityImgUrl }]
      })
    },
    resetForm() {
      this.$refs['dataForm'].resetFields()
    },
    submitForm() {
      var that = this
      if (that.temp.activityImgUrl === '') {
        this.$message({ title: 'Failed', message: '请上传截图', type: 'error', duration: 2000 })
        return false
      }
      crudUtil.createDataSingle(that, createActivity)
      //  that.resetForm();
    },
    updateForm() {
      var that = this
      if (that.temp.activityImgUrl === '') {
        this.$message({ title: 'Failed', message: '请上传截图', type: 'error', duration: 2000 })
        return false
      }
      crudUtil.updateDataSingle(that, updateActivity)
    },
    handlerUpload(file) {
      var that = this
      uploaderSingle(file, function(res) {
        console.log('imgUrl', res)
        that.temp.activityImgUrl = res.imgPath
      })
    }
  }
}
</script>
